<template>
  <!-- Vue3 新特性：允许多个根组件 -->
  <h1>{{ obj }}</h1>
  <button @click="obj.age++">点击年龄加1</button>
</template>

<script>
  /* 
    常见问题：computed 和 watch 应用场景区别？
      1. computed 计算出新的响应式数据
      2. watch 负责监听数据变化时，实现某个业务 (如: 数据更新时同步到本地存储)

  */
  import { reactive, watch } from "vue";
  export default {
    name: "App",
    setup() {
      // 响应式对象
      const obj = reactive({
        name: "张三",
        age: 18,
        cp: {
          name: "李四",
          age: 20,
        },
      });

      // 监听响应式对象 obj 变化，把数据同步到本地存储
      watch(obj, () => {
        console.log("obj发生了变化");
        localStorage.setItem("obj", JSON.stringify(obj));
      });

      return { obj };
    },
  };
</script>
